﻿@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<html>
<head>
    <script type="text/javascript">        
        $.extend($.fn.validatebox.methods, {
            remove: function (jq, newposition) {
                return jq.each(function () {
                    $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox');
                });
            },
            reduce: function (jq, newposition) {
                return jq.each(function () {
                    var opt = $(this).data().validatebox.options;
                    $(this).addClass("validatebox-text").validatebox(opt);
                });
            }
        });
        $(function () {
            $("#PrimaryPhoneNumber").mask("(999) 999-9999");
            $('#searchRoleId').combobox({
                url: '/User/GetRoles',
                valueField: 'RoleId',
                textField: 'RoleName'
            }); 
            //$("#AltPhoneNumber").mask("(999) 999-9999");
        });
        var url;
        function newUser() {
            loadRoles();
            $('#dlg').dialog('open').dialog('setTitle', 'New User');
            $('#RoleId').combobox('enable');
            $("#Email").attr("disabled", false);
            $('#Email').validatebox('reduce');
            $('#Password').validatebox('reduce');
            $('#rpwd').validatebox('reduce');
            $('#fm').form('clear');
            $("#div_img_list").html('');
            $("#div_gallery_list").html('');
            $('#Password').validatebox({
                required: true
            });
            $('#rpwd').validatebox({
                required: true
            });
            url = '/User/AddNewUser';
        }
        function editUser() {
            var row = $('#dg').datagrid('getSelected');
            $('#fm').form('clear');
            if (row) {
                $('#dlg').dialog('open').dialog('setTitle', 'Edit User');
                //loadRoles();                
                //$('.combo input').removeClass("validatebox-invalid");
                $('#RoleId').combobox("disable");               
                $("#Email").attr("disabled", true);
                $('#Email').validatebox('remove');
                $('#Password').validatebox({
                    required: false
                });
                $('#rpwd').validatebox({
                    required: false
                });
                $('#fm').form('load', row);
                url = '/User/UpdateUser';
            }
            else {
                $.messager.alert("Message", "Please select one record.");
            }
        }
        function saveUser() {
            var postdata = {
                UserId: $("#UserId").val(),
                Email: $("#Email").val(),
                FirstName: $("#FirstName").val(),
                LastName: $("#LastName").val(),
                Password: $("#Password").val(),
                ZipCode: $("#ZipCode").val(),
                CompanyName: $("#CompanyName").val(),
                PrimaryPhoneNumber: $("#PrimaryPhoneNumber").val(),
                //AltPhoneNumber: $("#AltPhoneNumber").val(),
                RoleId: $("#RoleId").combobox('getValue')
            };
            $.ajax({
                type: "POST",
                url: url,
                data: postdata,
                beforeSend: function () {
                    $('#RoleId').combobox("enable");
                    return $('#fm').form('validate');
                },
                success: function (result) {
                    $.messager.alert("Message", result.Message);
                    if (result.Success) {
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $("#div_img_list").html('');
                    } 
                }
            });
        }
        function removeUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.messager.confirm('Confirm', 'Are you sure you want to destroy this record?', function (r) {
                    if (r) {
                        $.post('/User/DeleteUser', { id: row.UserId }, function (result) {
                            if (result == "success") {
                                $.messager.alert("Message", "Delete Successfully");
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: 'Please contact the admin for support'//result.errorMsg
                                });
                            }
                        }, 'text');
                    }
                });
            }
            else {
                $.messager.alert("Message", "Please select one record.");
            }
        }
        function searchUser() {
            $('#dg').datagrid('load', {
                FirstName: $("#txtFirstName").val(),
                RoleId: $('#searchRoleId').combobox('getValue')
            });
        }
        function loadRoles() {
            $('#RoleId').combobox({
                url: '/User/GetRoles',
                valueField: 'RoleId',
                textField: 'RoleName',
                onLoadSuccess: function () {
                    var data = $('#RoleId').combobox('getData');
                    if (data.length > 0) {
                        $('#RoleId').combobox('select', data[0].RoleId);
                    }
                }
            });
        }
    </script>
    <style type="text/css">
        #fm
        {
            margin: 0;
            padding: 10px 30px;
        }

        .ftitle
        {
            font-size: 14px;
            font-weight: bold;
            padding: 5px 0;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }


        .fitem
        {
            clear: both;
            margin-bottom: 2px;
            min-height: 28px;
            position: relative;
            float: left;
        }

            .fitem label
            {
                display: inline-block;
                width: 130px;
            }

        .dialog-button
        {
            text-align: center;
        }
    </style>
</head>
<body>
    <table id="dg" title="User Management" class="easyui-datagrid" style="height: 450px"
        url="/User/GetAllUsers"
        toolbar="#toolbar" pagination="true" iconcls="icon-ok"
        rownumbers="true" fitcolumns="true" singleselect="true">
        <thead>
            <tr>
                <th field="FirstName" width="50">First Name</th>
                <th field="LastName" width="50">Last Name</th>
                <th field="Email" width="50">Email</th>
                <th field="CompanyName" width="50">Company Name</th>
                <th field="ZipCode" width="50">Zip Code</th>
                <th field="PrimaryPhoneNumber" width="50">Phone</th>
                <th field="AltPhoneNumber" width="50" hidden="true">Altnate PhoneNumber</th>
                <th field="RoleName" width="50" sortable="true">Account Type</th>
                <th field="CreateDate" width="50" formatter="ToJavaScriptDate">Create Date</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newUser()">New User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
        <div style="margin-left: 10px">
            First Name:
                <input id="txtFirstName" style="width: 150px" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            Account Type:
            <input class="easyui-combobox" type="text" id="searchRoleId" name="searchRoleId" />
            <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'" onclick="searchUser()">Search</a>

        </div>
    </div>
    <div id="dlg" class="easyui-dialog" style="width: 450px; height: 450px; padding: 10px 20px"
        closed="true" buttons="#dlg-buttons" dataoption="shadow:true" modal="true">
        <div class="ftitle">User Information</div>
        <form id="fm" method="post" novalidate>
            <input type="hidden" id="UserId" name="UserId">
            <div class="fitem">
                <label>Account Type:</label>
                <input class="easyui-combobox" style="width:150px;" id="RoleId" name="RoleId" data-options="valueField:'RoleId',textField:'RoleName'">
            </div>
            <div class="fitem">
                <label>Email:</label>
                <input id="Email" name="Email" class="easyui-validatebox" required="true" validtype="email">
            </div>
            <div class="fitem">
                <label>First Name:</label>
                <input id="FirstName" name="FirstName" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>Last Name:</label>
                <input id="LastName" name="LastName" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>Password:</label>
                <input id="Password" name="Password" type="password" class="easyui-validatebox" data-options="required:true">
            </div>
            <div class="fitem">
                <label>Confirm Password:</label>
                <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" data-options="required:true" validtype="equals['#Password']">
            </div>
            <div class="fitem">
                <label>Company Name:</label>
                <input id="CompanyName" name="CompanyName" class="easyui-validatebox">
            </div>
            <div class="fitem">
                <label>Zip Code:</label>
                <input id="ZipCode" name="ZipCode" class="easyui-validatebox">
            </div>
            <div class="fitem">
                <label>Phone:</label>
                <input id="PrimaryPhoneNumber" name="PrimaryPhoneNumber" class="easyui-validatebox">
            </div>
            @*<div class="fitem">
                <label>Altnate PhoneNumber:</label>
                <input id="AltPhoneNumber" name="AltPhoneNumber" class="easyui-validatebox">
            </div>*@
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveUser()">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
</body>
</html>


